﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>菱角背景动画</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            background: #e0e6eb;
        }

        svg {
            width: 100%;
            height: 100%;
        }

        svg g {
            mix-blend-mode: lighten;
        }

        svg polygon {
            stroke: none;
            fill: white;
        }
    </style>

</head>
<body>

<script type="text/javascript" src="js/TweenMax.min.js"></script>
<script type="text/javascript" src="js/Stats.min.js"></script>

<svg id="demo" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice">
    <defs>
        <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
            <stop id="stop1a" offset="0%" stop-color="#12a3b4"></stop>
            <stop id="stop1b" offset="100%" stop-color="#ff509e"></stop>
        </linearGradient>
        <linearGradient id="grad2" x1="0" y1="0" x2="1" y2="0" color-interpolation="sRGB">
            <stop id="stop2a" offset="0%" stop-color="#e3bc13"></stop>
            <stop id="stop2b" offset="100%" stop-color="#00a78f"></stop>
        </linearGradient>
    </defs>
    <rect id="rect1" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad1)"></rect>
    <rect id="rect2" x="0" y="0" width="1600" height="600" stroke="none" fill="url(#grad2)"></rect>
</svg>
<script>
    //////////////////////////////
    // Demo Functions
    //////////////////////////////

    function init(showStats) {
        // stats
        if (showStats) {
            let stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0';
            stats.domElement.style.top = '0';
            document.body.appendChild(stats.domElement);
            requestAnimationFrame(function updateStats() {
                stats.update();
                requestAnimationFrame(updateStats);
            });
        }

        // init
        let svg = document.getElementById('demo');
        tesselation.setup(svg);
        gradients.setup();

        let lastTransitionAt, transitionDelay = 5500, transitionDuration = 3000;

        function playNextTransition() {
            tesselation.next(transitionDuration);
            gradients.next(transitionDuration);
        };

        function tick(time) {
            if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) {
                lastTransitionAt = time;
                playNextTransition();
            }
            window.requestAnimationFrame(tick);
        }

        window.requestAnimationFrame(tick);
    }

    //////////////////////////////
    // Delaunay Triangulation
    //////////////////////////////

    let calcDelaunayTriangulation = (function () {
        let EPSILON = 1.0 / 1048576.0;

        function getSuperT(vertices) {
            let xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY,
                xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY,
                i, xDiff, yDiff, maxDiff, xCenter, yCenter;
            for (i = vertices.length; i--;) {
                if (vertices[i][0] < xMin) xMin = vertices[i][0];
                if (vertices[i][0] > xMax) xMax = vertices[i][0];
                if (vertices[i][1] < yMin) yMin = vertices[i][1];
                if (vertices[i][1] > yMax) yMax = vertices[i][1];
            }
            xDiff = xMax - xMin;
            yDiff = yMax - yMin;
            maxDiff = Math.max(xDiff, yDiff);
            xCenter = xMin + xDiff * 0.5;
            yCenter = yMin + yDiff * 0.5;
            return [
                [xCenter - 20 * maxDiff, yCenter - maxDiff],
                [xCenter, yCenter + 20 * maxDiff],
                [xCenter + 20 * maxDiff, yCenter - maxDiff]
            ];
        }

        function circumcircle(vertices, i, j, k) {
            let xI = vertices[i][0], yI = vertices[i][1],
                xJ = vertices[j][0], yJ = vertices[j][1],
                xK = vertices[k][0], yK = vertices[k][1],
                yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK),
                xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff;
            // bail condition
            if (yDiffIJ < EPSILON && yDiffJK < EPSILON)
                throw new Error("Can't get circumcircle since all 3 points are y-aligned");
            // calc circumcircle center x/y, radius
            m1 = -((xJ - xI) / (yJ - yI));
            m2 = -((xK - xJ) / (yK - yJ));
            xMidIJ = (xI + xJ) / 2.0;
            xMidJK = (xJ + xK) / 2.0;
            yMidIJ = (yI + yJ) / 2.0;
            yMidJK = (yJ + yK) / 2.0;
            xCenter = (yDiffIJ < EPSILON) ? xMidIJ :
                (yDiffJK < EPSILON) ? xMidJK :
                    (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2);
            yCenter = (yDiffIJ > yDiffJK) ?
                m1 * (xCenter - xMidIJ) + yMidIJ :
                m2 * (xCenter - xMidJK) + yMidJK;
            xDiff = xJ - xCenter;
            yDiff = yJ - yCenter;
            // return
            return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff};
        }

        function dedupeEdges(edges) {
            let i, j, a, b, m, n;
            for (j = edges.length; j;) {
                b = edges[--j];
                a = edges[--j];
                for (i = j; i;) {
                    n = edges[--i];
                    m = edges[--i];
                    if ((a === m && b === n) || (a === n && b === m)) {
                        edges.splice(j, 2);
                        edges.splice(i, 2);
                        break;
                    }
                }
            }
        }

        return function (vertices) {
            let n = vertices.length,
                i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c;
            // bail if too few / too many verts
            if (n < 3 || n > 2000)
                return [];
            // copy verts and sort indices by x-position
            vertices = vertices.slice(0);
            indices = new Array(n);
            for (i = n; i--;)
                indices[i] = i;
            indices.sort(function (i, j) {
                return vertices[j][0] - vertices[i][0];
            });
            // supertriangle
            st = getSuperT(vertices);
            vertices.push(st[0], st[1], st[2]);
            // init candidates/locked tris list
            candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)];
            locked = [];
            edges = [];
            // scan left to right
            for (i = indices.length; i--; edges.length = 0) {
                c = indices[i];
                // check candidates tris against point
                for (j = candidates.length; j--;) {
                    // lock tri if point to right of circumcirc
                    dx = vertices[c][0] - candidates[j].x;
                    if (dx > 0.0 && dx * dx > candidates[j].r) {
                        locked.push(candidates[j]);
                        candidates.splice(j, 1);
                        continue;
                    }
                    // point outside circumcirc = leave candidates
                    dy = vertices[c][1] - candidates[j].y;
                    if (dx * dx + dy * dy - candidates[j].r > EPSILON)
                        continue;
                    // point inside circumcirc = break apart, save edges
                    edges.push(
                        candidates[j].i, candidates[j].j,
                        candidates[j].j, candidates[j].k,
                        candidates[j].k, candidates[j].i
                    );
                    candidates.splice(j, 1);
                }
                // new candidates from broken edges
                dedupeEdges(edges);
                for (j = edges.length; j;) {
                    b = edges[--j];
                    a = edges[--j];
                    candidates.push(circumcircle(vertices, a, b, c));
                }
            }
            // close candidates tris, remove tris touching supertri verts
            for (i = candidates.length; i--;)
                locked.push(candidates[i]);
            candidates.length = 0;
            for (i = locked.length; i--;)
                if (locked[i].i < n && locked[i].j < n && locked[i].k < n)
                    candidates.push(locked[i].i, locked[i].j, locked[i].k);
            // done
            return candidates;
        };
    })();

    let tesselation = (function () {
        let svg, svgW, svgH, prevGroup;

        function createRandomTesselation() {
            let wW = window.innerWidth;
            let wH = window.innerHeight;

            let gridSpacing = 250, scatterAmount = 0.75;
            let gridSize, i, x, y;

            if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize
                gridSize = gridSpacing * svgW / wW;
            } else { // window taller than svg = use height for gridSize
                gridSize = gridSpacing * svgH / wH;
            }

            let vertices = [];
            let xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2;
            for (x = Math.floor(svgW / gridSize) + 1; x >= -1; x--) {
                for (y = Math.floor(svgH / gridSize) + 1; y >= -1; y--) {
                    vertices.push(
                        [
                            xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)),
                            yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5))
                        ]
                    );
                }
            }

            let triangles = calcDelaunayTriangulation(vertices);

            let group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
            let polygon;
            for (i = triangles.length; i;) {
                polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
                polygon.setAttribute('points',
                    vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
                    vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' +
                    vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1]
                );
                group.appendChild(polygon);
            }

            return group;
        }

        return {
            setup: function (svgElement) {
                svg = svgElement;
                let vb = svg.getAttribute('viewBox').split(/\D/g);
                svgW = vb[2];
                svgH = vb[3];
            },
            next: function (t) {
                let toRemove, i, n;
                t /= 1000;

                if (prevGroup && prevGroup.children && prevGroup.children.length) {
                    toRemove = prevGroup;
                    n = toRemove.children.length;
                    for (i = n; i--;) {
                        TweenMax.to(toRemove.children[i], t * 0.4, {opacity: 0, delay: t * (0.3 * i / n)});
                    }
                    TweenMax.delayedCall(t * (0.7 + 0.05), function (group) {
                        svg.removeChild(group);
                    }, [toRemove], this);
                }
                let g = createRandomTesselation();
                n = g.children.length;
                for (i = n; i--;) {
                    TweenMax.fromTo(g.children[i], t * 0.4, {opacity: 0}, {
                        opacity: 0.3 + 0.25 * Math.random(),
                        delay: t * (0.3 * i / n + 0.3),
                        ease: Back.easeOut
                    });
                }
                svg.appendChild(g);
                prevGroup = g;
            }
        }
    })();

    //////////////////////////////
    // Gradients
    //////////////////////////////

    let gradients = (function () {
        let grad1, grad2, showingGrad1;

        // using colors from IBM Design Colors this time
        let colors = [ // 14 colors - use 3-5 span
            '#3c6df0', // ultramarine50
            '#12a3b4', // aqua40
            '#00a78f', // teal40
            '#00aa5e', // green40
            '#81b532', // lime30
            '#e3bc13', // yellow20
            '#ffb000', // gold20
            '#fe8500', // orange30
            '#fe6100', // peach40
            '#e62325', // red50
            '#dc267f', // magenta50
            '#c22dd5', // purple50
            '#9753e1', // violet50
            '#5a3ec8'  // indigo60
        ];

        function assignRandomColors(gradObj) {
            let rA = Math.floor(colors.length * Math.random());
            let rB = Math.floor(Math.random() * 3) + 3; // [3 - 5]
            rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length;
            gradObj.stopA.setAttribute('stop-color', colors[rA]);
            gradObj.stopB.setAttribute('stop-color', colors[rB]);
        }

        return {
            setup: function () {
                showingGrad1 = false;
                grad1 = {
                    stopA: document.getElementById('stop1a'),
                    stopB: document.getElementById('stop1b'),
                    rect: document.getElementById('rect1')
                };
                grad2 = {
                    stopA: document.getElementById('stop2a'),
                    stopB: document.getElementById('stop2b'),
                    rect: document.getElementById('rect2')
                };
                grad1.rect.style.opacity = 0;
                grad2.rect.style.opacity = 0;
            },
            next: function (t) {
                t /= 1000;

                let show, hide;
                if (showingGrad1) {
                    hide = grad1;
                    show = grad2;
                } else {
                    hide = grad2;
                    show = grad1;
                }
                showingGrad1 = !showingGrad1;

                TweenMax.to(hide.rect, 0.55 * t, {opacity: 0, delay: 0.2 * t, ease: Sine.easeOut});
                assignRandomColors(show);
                TweenMax.to(show.rect, 0.65 * t, {opacity: 1, ease: Sine.easeIn});
            }
        };
    })();

    //////////////////////////////
    // Start
    //////////////////////////////

    init();
</script>

</body>
</html>

